<script setup>
import { ref } from 'vue'
import commonFormItem from "@/components/CommonFormItem.vue";
const form = ref([
    { label: '金融产品' }, { label: '客户ID' }, { label: '用呗在贷' }, { label: '消费在贷' }, { label: '放款金额' }, { label: '放款日期' }, { label: '放款状态' }, { label: '放款类型' }, { label: '放款方式' }, { label: '放款渠道' }
]);
const test = val => {
    console.log(val.value);
};
</script>
<template>
    <div class="container">
        <el-form :inline="true" class="form-container">
            <el-row justify="start">
                <el-col class="full-width-center-content" :span="6" :offset="0" v-for="(item,index) in form" :key="index">
                    <common-form-item @updateFormItemValue="test" :formItemConfig="item"></common-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="24" :offset="0" class="full-width-center-content search-btn">
                    <el-form-item class="margin0">
                        <el-button type="primary">查询</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        
    </div>
</template>
<style lang="scss" scoped>
.margin0 {
    margin: 0;
}
.form-container {
    padding: 20px;
    background-color: white;
    .full-width-center-content {
        padding: 10px;
        display: flex !important;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        height: 100%;            /* 确保容器高度是100%，以便垂直居中起作用 */
    }
    .search-btn {
        margin-top: 10px;
    }
}
</style>